<template>
    <div class="top">
         <div class="left">
            <h2>家医后台管理系统</h2>
            <img src="../../assets/LoginImages/huanying.png" style="width:40px">
         </div>
         <div class="right">
            <el-icon @click="drawer = true" style="font-size: 20px;margin-left: 85px;cursor: pointer;position: relative;z-index: 9;"><Bell /></el-icon>
            <div class="right-content">
            <el-menu
                style="height:80px;justify-content: flex-end;font-size: 14px;width: 240px;background-color: #4B4453;"
                class="el-menu-demo"
                mode="horizontal"
                :router="true"
                >
                <div class="img"></div>
                <el-sub-menu index="1">
                    <template #title>你好 {{store.state.userInfo.account}}</template>
                    <el-menu-item index="info">我的资料</el-menu-item>
                    <el-menu-item index="resetpsd">重置密码</el-menu-item>
                    <el-menu-item index="" @click="SignOut">退出系统</el-menu-item>
                </el-sub-menu>
            </el-menu>
            </div>
         </div>
         <el-drawer
            v-model="drawer"
            title="消息通知"
            direction="rtl"
            >
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="服务消息" name="first">
                    <div class="serve" style="cursor: pointer;" v-if="isShow" @click="isShow = !isShow">
                        <el-icon style="font-size: 30px;color: orange;"><Monitor /></el-icon>
                        <div class="text">
                            <div class="title">服务包停用提醒</div>
                            <div class="info" style="color:#999;font-size: 13px;margin-top: 5px;">服务包停用通知</div>
                        </div>
                    </div>
                    <div class="details" v-else>
                        <div class="item">
                            <span class="item-title" lang="zh">公告标题</span>
                            <span class="item-content">服务包停用通知</span>
                        </div>
                        <div class="item">
                            <span class="item-title" lang="zh">公告内容</span>
                            <span class="item-content">编号0009090服务包因服务项目更新将于10/09-10/11号暂停使用，预计10/12日重新恢复使用，敬请期待！</span>
                        </div>
                        <div class="item">
                            <span class="item-title" lang="zh">发布时间 </span>
                            <span class="item-content">上午 10:09:09</span>
                        </div>
                        <div class="item">
                            <span class="item-title" lang="zh">发布人</span>
                            <span class="item-content">王小敏</span>
                        </div>
                        <el-button style="margin:25px;background-color: rgb(41,132,248);" type="primary" size="small" @click="isShow = !isShow">返回</el-button> 
                    </div>
                </el-tab-pane>
                <el-tab-pane label="系统公告" name="second">
                    <div class="notice" style="cursor: pointer;">
                        系统公告
                    </div> 
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
    </div>
</template>
  
  <script lang="ts">
  import { defineComponent,ref } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
  
  export default defineComponent({
    name: 'TopNav',
    components: {
      
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const drawer = ref(false)
        const activeName = ref('first')
        const isShow = ref(true)
        const SignOut =()=>{
            ElMessageBox.confirm(
                '确定退出系统吗?',
                '确认退出',
                {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                }
            )
            .then(() => {
                ElMessage({
                    type: 'success',
                    message: '退出成功！',
                })
                localStorage.setItem('userInfo',JSON.stringify({account:store.state.userInfo.account,password:""}))
                setTimeout(() => {
                     router.push('/')
                }, 1000);
            })
            .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
            })
        }

        return {
            drawer,
            SignOut,
            activeName,
            store,
            isShow
        }
    }
  });
  </script>
  <style lang="less" scoped>
  .top{
    height: 80px;
    background-color: #4B4453;
    position: relative;
    // color: #2984F8;
    color: #2984F8;
    .left{
        position: absolute;
        left: 20px;
        line-height: 80px;
        h2{
            width: 200px;
            display: inline-block;
            font-weight: 500;
            font-style: normal;
            font-size: 18px;
            margin: 0;
        }
        img{
            margin-left: 50px;
            vertical-align: middle;
        }
    }
    .right{
        position: absolute;
        right: 150px;
        height: 80px;
        line-height: 80px;
        width: 330px;
        // border: 1px solid red;
        .right-content{
            position: absolute;
            right: 0;
            top: 0;
            .img{
                height: 40px;
                width: 40px;
                border-radius: 50%;
                background-color: #333;
                margin: 20px 0 0 0;
            }
        }
    }
  }
  .serve{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text{
        font-size: 14px;
        flex: 1;
        margin-left: 10px;
    }
  }
  .details{
    .item{
        font-size: 13px;
        margin: 20px;
        .item-title{
            color: #999;
            margin-right: 20px;
            width: 55px;
            text-align: justify;
            text-align-last: justify;
            display: inline-block;
            // line-height: 20px;
        }
        .item-content{
            color: #333;
            line-height: 25px;
        }
    }
  }
  </style>
  